<template>
  <div>
    <div class="icon_uploading" @click="httpRequest">
      <span>上传</span>
    </div>
    <el-dialog
      title="发票识别"
      :visible.sync="quotaInvoiceVisible"
      width="30%"
      :before-close="handleClose"
    >
      <quotainvoiceFrom :from-data="fromData" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="quotaInvoiceVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="quotaInvoiceVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getQuotaInvoice } from '@/api/quotaInvoice/index';
import quotainvoiceFrom from '@/views/quotaInvoice/components/quotainvoiceFrom.vue';
export default {
  components: {
    quotainvoiceFrom
  },
  data() {
    return {
      fromData: {},
      quotaInvoiceVisible: false
    };
  },
  methods: {
    async httpRequest() {
      const selFileEle = document.createElement('input');
      selFileEle.setAttribute('type', 'file');
      selFileEle.click();
      selFileEle.onchange = async e => {
        const file = e.path[0].files[0];
        const data = new FormData();
        data.append('image', file);
        const res = await getQuotaInvoice(data);
        if (res.success) {
          this.$message({
            message: res.message,
            type: 'success'
          });
          this.fromData = res.data.words_result;

          this.quotaInvoiceVisible = true;
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          });
        }
      };
    },
    handleClose() {
      this.fromData = {};
      this.quotaInvoiceVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped></style>
